<template>
	<view class="my_container">
		<view class="my_box">
			<!-- 分销员信息 -->
			<view class="user_box">
				<view class="user_avatar_box">
					<view class="avatar_box">
						<image :src="personMsgObj.small_shop_image ? personMsgObj.small_shop_image : defaultAvatar" mode="" class="avatar_img"></image>
					</view>
					<view class="user_msg_box">
						<view class="user_phone">
							<span v-if="userIsAgent == 0">{{ userInfo.phone.substring(0, 3) }}***{{ userInfo.phone.substring(7, 11) }}</span>
							<span v-else>{{ userInfo.mobile.substring(0, 3) }}***{{ userInfo.mobile.substring(7, 11) }}</span>
						</view>
						<view class="" style="display: flex; align-items: baseline">
							<view class="user_level">
								<view class="" v-if="userIsAgent == 0">
									<!-- <span v-if="userInfo.level == '1'">高级分销员</span>
									<span v-else-if="userInfo.level == '2'">中级分销员</span>
									<span v-else-if="userInfo.level == '3'">初级分销员</span> -->
								</view>
								<view class="" v-else>
									<view class="" v-if="userInfo.member_level_id == 0">合伙人</view>
									<view class="" v-else-if="userInfo.member_level_id == 1">星钻合伙人</view>
								</view>
							</view>

							<view :class="[userInfo.is_real == 0 ? 'user_real_name_no' : 'user_real_name']">
								{{ userInfo.is_real == 0 ? '未实名' : '已实名' }}
							</view>
						</view>
					</view>
				</view>

				<view class="user_promotion_all">
					<view class="user_promotion_box" v-if="userInfo.level !== 3" @click="handlerSpread('spread')">
						<image :src="oneClickPromotion" mode="" class="user_promotion_img"></image>
					</view>

					<!-- <view class="invitation_code" v-if="personMsgObj.share_code"
						@click="handleCopy(personMsgObj.share_code)">
						邀请码：{{ personMsgObj.share_code }}
					</view> -->
				</view>
			</view>

			<!-- 提现 -->
			<commission-record :personMsgObj="personMsgObj" :userAccumulated="userAccumulated" :isShowWithdrawal="isShowWithdrawal" :userIsAgent="userIsAgent" :commissionList="commissionList"></commission-record>

			<!-- 招募分销员图片 -->
			<view class="promotion_img_box" @click="handlerSpread('spread')" v-if="userInfo.level !== 3">
				<image :src="recruitImg" mode="widthFix" class="promotion_img"></image>
			</view>

			<!-- 数据统计 -->
			<data-statistics :fxuserDataObj="fxuserDataObj" :userIsAgent="userIsAgent"></data-statistics>

			<!-- 教学 -->
			<proxy-teach :proxyTeach="proxyTeach"></proxy-teach>

			<!-- 基本功能 -->
			<distribution
				ref="refsDistri"
				:userInfo="userInfo"
				:isSubscribe="isSubscribeNew"
				:isShowLive="isShowLive"
				:userIsAgent="userIsAgent"
				:programGetPay="programGetPay"
				@distributorsRecruit="distributorsRecruit"
				@myStore="myStore"
			></distribution>
		</view>

		<!-- 倒计时 -->
		<!-- <view>
			<view v-for="(item, index) in times" :key="index">{{ item.currentTime }}</view>
		</view> -->
		<!-- 关注公众号弹窗 -->
		<u-popup v-model="showOfficialAccount" mode="center" width="680" border-radius="12">
			<view class="popup_official_box">
				<image :src="officialAccountImg" mode="widthFix" :show-menu-by-longpress="true"></image>
			</view>
			<view class="popup_official_title">请先关注公众号</view>
		</u-popup>
	</view>
</template>

<script>
import { countDownFun } from '@/utils/times.js';
import ProxyTeach from '@/pages/my/components/proxyTeach.vue';
import Distribution from '@/pages/my/components/distribution.vue';
import CommissionRecord from '@/pages/my/components/commissionRecord.vue';
import DataStatistics from '@/pages/my/components/dataStatistics.vue';
import imageUrl from '@/utils/imgUrl.js';
export default {
	components: {
		ProxyTeach,
		Distribution,
		CommissionRecord,
		DataStatistics
	},
	data() {
		return {
			// 倒计时
			// times: [{
			// 		haveTime: new Date('2023-07-11 16:06:00')
			// 	},
			// ],
			userInfo: {},
			imgUploadUrl: '',
			defaultAvatar: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836e814b6c5_1719889537.jpg',
			personMsgObj: {},
			showPopup: false,
			promotionImg: '',
			proxyTeach: [],
			fxuserDataObj: {},
			recruitImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66a9df97e746e_1722408855.png',
			oneClickPromotion: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66a9f0b1885b1_1722413233.png',

			isSubscribe: '', // 是否关注公众号
			isSubscribeNew: '', // 是否关注公众号
			showOfficialAccount: false,
			officialAccountImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/lunbo_image/660ccdfd97e61_1712115197.jpg',
			isShowWithdrawal: '',
			isShowLive: '',
			userAccumulated: '',
			userIsAgent: '',
			programGetPay: Boolean,
			commissionList: [
				{
					id: '0',
					title: '当前佣金',
					price: '',
					tip: '佣金记录'
				},
				{
					id: '1',
					title: '累计提现',
					price: '',
					tip: '提现记录'
				},
				{
					id: '2',
					title: '可提现',
					price: '',
					tip: '申请提现'
				}
			]
		};
	},
	onShow() {
		// this.getUserInfo()
		this.getQandaTypeListFront();
		// this.getFxuserDataCount()
		this.moveterConfig();
		this.userInfo = uni.getStorageSync('userInfo');
		this.userIsAgent = uni.getStorageSync('h5-isAgent');
		this.getUserGetpayAll();
		this.imgUploadUrl = imageUrl.uploadImgUrl;
		this.promotionUrl = imageUrl.promotionImgUrl;
	},
	onLoad(options) {
		// uni.showToast({
		// 	title: options.id
		// })
	},
	methods: {
		// 获取佣金记录、提现记录、可提现的接口
		getUserGetpayAll() {
			this.$request('/api/getUserGetpayAll', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.userAccumulated = res.data;
				} else {
					// uni.showToast({
					// 	title: '查询累计提现失败',
					// 	icon: 'none'
					// })
					return;
				}
			});
		},

		distributorsRecruit(val) {
			this.getFxuserIsFollow(val);
		},

		myStore(val) {
			this.getFxuserIsFollow(val);
		},

		// 控制
		moveterConfig() {
			this.$request('/api/moveterConfig', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.isShowWithdrawal = res.data.get_pay;
					this.programGetPay = res.data.program_get_pay;
					this.isShowLive = res.data.live_show;
					if (this.programGetPay == false) {
						this.commissionList = [
							{
								id: '0',
								title: '当前佣金',
								price: '',
								tip: '佣金记录'
							},
							{
								id: '1',
								title: '累计提现',
								price: '',
								tip: '提现记录'
							}
						];
					} else {
						this.commissionList = [
							{
								id: '0',
								title: '当前佣金',
								price: '',
								tip: '佣金记录'
							},
							{
								id: '1',
								title: '累计提现',
								price: '',
								tip: '提现记录'
							},
							{
								id: '2',
								title: '可提现',
								price: '',
								tip: '申请提现'
							}
						];
					}
				} else {
					return;
				}
			});
		},

		// 是否需要关注公众号
		getFxuserIsFollow(val) {
			const that = this;
			this.$request('/api/getFxuserIsFollow', {}, 'GET').then((res) => {
				if (res.code == 1) {
					if (res.data == 0) {
						if (val == 'distributorsRecruit') {
							if (that.userIsAgent == 0) {
								// 分销员
								// 调分享员招募
								uni.navigateTo({
									url: '/pages/my/distributorsPromote/distributorsPromote'
								});
							} else {
								// 合伙人
								// 调分享员招募
								uni.navigateTo({
									url: '/pages/agentPortion/my/distributorsPromote/distributorsPromote'
								});
							}
							// 新
							// uni.navigateTo({
							// 	url: '/pages/my/setSplit/setSplit'
							// })
						} else if (val == 'myStore') {
							if (that.userIsAgent == 0) {
								// 分销员
								// 挑我的小店
								uni.navigateTo({
									url: '/pages/my/myStore/myStore'
								});
							} else {
								// 合伙人
								// 挑我的小店
								uni.navigateTo({
									url: '/pages/agentPortion/my/myStore/myStore'
								});
							}
						} else if (val == 'spread') {
							if (that.userIsAgent == 0) {
								// 分销员
								// 顶部分销员招募
								uni.navigateTo({
									url: '/pages/my/distributorsPromote/distributorsPromote'
								});
							} else {
								// 合伙人
								// 顶部分销员招募
								uni.navigateTo({
									url: '/pages/agentPortion/my/distributorsPromote/distributorsPromote'
								});
							}

							// uni.navigateTo({
							// 	url: '/pages/my/setSplit/setSplit'
							// })
						}
					} else {
						// 要关注
						this.getFxuserIsSubscribe(val);
					}
				} else {
					uni.showToast({
						title: '获取失败',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 获取是否关注公众号接口
		getFxuserIsSubscribe(val) {
			const that = this;
			this.$request('/api/getFxuserIsSubscribe', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.isFollow = res.data;
					if (this.isFollow == false) {
						that.showOfficialAccount = true;
					} else {
						if (val == 'distributorsRecruit') {
							if (that.userIsAgent == 0) {
								// 分销员
								// 调分享员招募
								uni.navigateTo({
									url: '/pages/my/distributorsPromote/distributorsPromote'
								});
							} else {
								// 合伙人
								// 调分享员招募
								uni.navigateTo({
									url: '/pages/agentPortion/my/distributorsPromote/distributorsPromote'
								});
							}

							// uni.navigateTo({
							// 	url: '/pages/my/setSplit/setSplit'
							// })
						} else if (val == 'myStore') {
							if (that.userIsAgent == 0) {
								// 分销员
								// 挑我的小店
								uni.navigateTo({
									url: '/pages/my/myStore/myStore'
								});
							} else {
								// 合伙人
								// 挑我的小店
								uni.navigateTo({
									url: '/pages/agentPortion/my/myStore/myStore'
								});
							}
						} else if (val == 'spread') {
							if (that.userIsAgent == 0) {
								// 分销员
								// 顶部分销员招募
								uni.navigateTo({
									url: '/pages/my/distributorsPromote/distributorsPromote'
								});
							} else {
								// 合伙人
								// 顶部分销员招募
								uni.navigateTo({
									url: '/pages/agentPortion/my/distributorsPromote/distributorsPromote'
								});
							}

							// uni.navigateTo({
							// 	url: '/pages/my/setSplit/setSplit'
							// })
						}
					}
				} else {
					return;
				}
			});
		},

		// 数据统计接口
		getFxuserDataCount() {
			const url = uni.getStorageSync('h5-isAgent') == 0 ? '/api/getFxuserDataCount' : '/api/getAgentDataCount';
			this.$request(url, {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.fxuserDataObj = res.data;
				} else {
					return;
				}
			});
		},

		// 代理教学-问题分类
		getQandaTypeListFront() {
			this.$request('/api/getQandaTypeListFront', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.proxyTeach = res.data;
					this.getUserInfo();
					this.getFxuserDataCount();
					this.moveterConfig();
					this.proxyTeach.forEach((item) => {
						if (item.name == '如何提单') {
							item.img = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66a9e00b1867b_1722408971.png';
						} else if (item.name == '如何分销') {
							item.img = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66a9dfff5cbca_1722408959.png';
						} else if (item.name == '系统问题') {
							item.img = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66a9dfe2d23cb_1722408930.png';
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		handlerPreview() {
			let _this = this;
			let imgsArray = [];
			imgsArray[0] = this.promotionUrl + this.promotionImg;
			uni.previewImage({
				current: 0,
				urls: imgsArray
			});
			this.showPopup = false;
		},

		// 获取用户信息
		getUserInfo() {
			const url = uni.getStorageSync('h5-isAgent') == 0 ? '/api/getFxuserLoginInfo' : '/api/getAgentLoginInfo';
			this.$request(url, {}, 'GET').then((res) => {
				if (res.code == 1) {
					let userInfo = uni.getStorageSync('userInfo');
					this.personMsgObj = res.data;
					userInfo = res.data;
					uni.setStorageSync('userInfo', userInfo);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 获取推广海报
		getShareImg() {
			this.$request(
				'/api/createUserPoster',
				{
					id: uni.getStorageSync('userInfo').id
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					this.promotionImg = res.data;
					this.showPopup = true;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 点击头像跳转个人信息修改
		handlerAvatar() {
			// uni.navigateTo({
			// 	url: '/pages/my/personalData/personalData'
			// })
		},

		// 一键推广
		handlerSpread(val) {
			const that = this;
			this.getFxuserIsFollow(val);
		},

		// 复制
		handleCopy(val) {
			uni.setClipboardData({
				data: val,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.my_container {
	.my_box {
		width: 100%;
		min-height: 100vh;
		background-image: url('https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe2fb4ac7ab_1711157172.png');
		// background-image: url('/static/my/new/img-bgc.jpg');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100% 100%;

		.user_box {
			display: flex;
			justify-content: space-between;
			padding: 33rpx 0 30rpx 49rpx;

			.user_avatar_box {
				display: flex;
				align-items: center;

				.avatar_box {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;

					.avatar_img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user_phone {
					font-family: my-font;
					font-weight: bold;
					font-size: 38rpx;
					color: #333333;
				}

				.user_level {
					font-family: all-font;
					font-weight: 400;
					font-size: 26rpx;
					color: #808080;
					padding-top: 14rpx;
				}

				.user_real_name_no {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 98rpx;
					height: 37rpx;
					background: linear-gradient(145deg, #3b64b6, #203a71);
					border-radius: 10rpx;
					font-family: all-font;
					font-weight: 400;
					font-size: 25rpx;
					color: #f8dcb2;
					margin-left: 15rpx;
				}

				.user_real_name {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 98rpx;
					height: 37rpx;
					background: linear-gradient(145deg, #ce3f3f, #9b2323);
					border-radius: 10rpx;
					font-family: all-font;
					font-weight: 400;
					font-size: 25rpx;
					color: #f8dcb2;
					margin-left: 15rpx;
				}
			}

			.user_promotion_all {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.user_promotion_box {
					width: 286rpx;
					height: 68rpx;

					.user_promotion_img {
						width: 100%;
						height: 100%;
					}
				}

				.invitation_code {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #0e255b;
					padding: 8rpx 20rpx 0 0;
				}
			}
		}

		.promotion_img_box {
			margin: -30rpx 19rpx 0;

			.promotion_img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.popup_official_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.popup_official_title {
		text-align: center;
		padding-bottom: 20rpx;
	}
}
</style>
